<template>
	<view :class="placeholder?'nav-placeholder':''" >
		<view class="nav flex justify-center align-center" :style="{background:bgColor,top:navTop}" id="nav">
			<text class="nav-title" :style="[{color:titleColor},{opacity:titleOpacity}]">{{title}}</text>
			<text class="back-icon iconfont1 icon-fanhui" @click="$emit('back')"></text>
		</view>
		<view class="status_bar-fixed" :style="{background:bgColor}"></view>
		<view class="status_bar" ></view>
	</view>
</template>

<script>
	export default {
		props:{
			top:{
				type:String,
				default:""
			},
			bgColor:{
				type:String,
				default:"transparent"
			},
			placeholder:{
				type:Boolean,
				default:()=>true
			},
			title:{
				type:String,
				required:true
			},
			titleColor:{
				type:String,
				default:"#111"
			},
			titleOpacity:{
				type:[Number,String],
				default:1
			},
		},
		computed:{
			navTop(){
				if(this.top){
					return this.top;
				}else{
					const res = uni.getSystemInfoSync();
					return res.statusBarHeight+"px";
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.status_bar-fixed{
		position: fixed;
		top:0;
		left: 0;
		width: 100%;
		height: var(--status-bar-height);
		z-index: 100;
	}
.nav{
	position: fixed;
	top: var(--status-bar-height);
	left: 0;
	width: 100%;
	height: 112rpx;
	z-index: 100;
	.nav-title{
		font-size: 35rpx;
		font-weight: bold;
		color: #111111;
	}
	.back-icon{
		position: absolute;
		top: 26rpx;
		left: 22rpx;
		width: 68rpx;
		height: 68rpx;
		background: #FFFFFF;
		border-radius: 50%;
		font-size: 40rpx;
		line-height: 68rpx;
		text-align: center;
		color: #111111;
	}
}
.nav-placeholder{
	&::after{
		display: block;
		content: " ";
		height: 112rpx;
	}
}
</style>